<template>
	<view class="page_box" style="height: 100%;">
		<!-- 导航栏 -->
		<shopro-navbar :isBack="true" :backIconColor="'#000'">
			<view class="head_box" slot="content">
				<u-search shape="square" action-text="" :action-style="{'display':'none'}" v-model="searchVals"
					padding="30rpx" placeholder="输入店铺名称" height="64" @search="onSearch" @clear="clearSearch"></u-search>
			</view>
		</shopro-navbar>
		<!-- 搜索框 -->
		<view class="content_box">
			<!-- 搜索历史 -->
			<view class="search-history">
				<view class="title-box u-flex u-row-between u-m-b-40">
					<view class="title">我的搜索记录</view>
					<u-icon size="36" name="trash" class="clear-history-btn" @click="showModals()"></u-icon>
				</view>
				<view class="content u-flex u-col-center u-row-left u-flex-wrap">
					<!--					<button class="item u-reset-button u-m-b-20 u-m-r-20  u-ellipsis-1" @tap="onSearch(item)" v-for="(item, index) in historyTag" :key="index">{{ item }}</button>-->
					<view v-for="(item, index) in historyTag" :key="index">
						<view class="tags" @click.stop="onSearch(item)">{{item}}
							<view class="colesed" @click.stop="tagClick(item)" v-if="showModal">
								<u-icon size="36" name="close-circle-fill"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- modal -->
		<!--		<u-modal-->
		<!--			ref="uModal"-->
		<!--			v-model="showModal"-->
		<!--			:show-cancel-button="true"-->
		<!--			confirm-color="#e9b461"-->
		<!--			cancel-color="#666666"-->
		<!--			@confirm="clearSearchHistory"-->
		<!--			confirm-text="清除"-->
		<!--			cancel-text="取消"-->
		<!--			content="是否清除历史搜索记录？"-->
		<!--			title="提示"-->
		<!--		></u-modal>-->
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				searchVals: '',
				historyTag: [],
				showModal: false
			};
		},
		computed: {},
		onShow() {
			this.searchVals = '';
			this.historyTag = uni.getStorageSync('searchHistoryArr') ? JSON.parse(uni.getStorageSync('searchHistoryArr')) :
				[];
		},
		methods: {
			// 搜索
			onSearch(e) {
				if (e && !this.historyTag.includes(e)) {
					let searchHistoryArr = JSON.stringify(this.getArr(this.historyTag, e));
					uni.setStorageSync('searchHistoryArr', searchHistoryArr);
				}
				this.$Router.push(`/pages/goods/list?keywords=${e}`);
				this.searchVals = '';
			},
			tagClick(index) {
				let indexs = this.historyTag.findIndex(function(item) {
					return item === index;
				});
				this.historyTag.splice(indexs, 1)
				uni.setStorageSync('searchHistoryArr', JSON.stringify(this.historyTag));
				this.showModal = false;
				uni.showToast({
					title: '清除成功',
					// 如果不需要图标，请设置为false
					icon: "none"
				})
			},
			showModals() {
				this.showModal = true;
				console.log("this.showModal=============", this.showModal)
			},
			// 清除输入框
			clearSearch() {
				this.searchVals = '';
			},
			// 队列
			getArr(list, item) {
				let arr = list;
				let length = 10; //队列长度
				arr.length < length ? arr.unshift(item) : arr.pop();
				return arr;
			},
			// 清除历史记录
			clearSearchHistory() {
				this.historyTag = [];
				uni.removeStorageSync('searchHistoryArr');
			},
		}
	};
</script>

<style lang="scss">
	.page_box {
		background-color: #fff;
	}

	.search-history {
		padding: 30rpx;

		.title-box {
			.title {
				font-size: 30rpx;
				font-weight: bold;
				color: #999999;
			}

			.clear-history-btn {
				font-size: 28rpx;
				font-weight: 500;
				color: #999999;
			}
		}

		.content {
			width: 100%;

			.item {
				padding: 0 20rpx;
				line-height: 60rpx;
				background: #f5f6f8;
				border-radius: 30rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				max-width: 690rpx;
			}
		}
	}

	/deep/.search-item.u-mode-light-info {
		position: relative;
		margin-right: 20rpx;
	}

	/deep/.search-item .u-icon-wrap {
		position: absolute;
		top: -20rpx;
		right: -24rpx;
		background: rgba(0, 0, 0, 0.6);
		color: #fff;
		border-radius: 50%;
		height: 40rpx;

		.u-close-icon {
			margin-left: 18rpx;
		}

		.u-icon__icon--info {
			left: -6rpx;
			color: #fff;
		}
	}

	.tags {
		background-color: #f4f4f5;
		color: #909399;
		border: 2rpx solid #c8c9cc;
		font-size: 22rpx;
		padding: 10rpx 32rpx;
		position: relative;
		border-radius: 52rpx;
		margin-right: 10rpx;

		.colesed {
			position: absolute;
			top: -16rpx;
			right: -12rpx;
		}
	}
</style>
